<html>
	<head>
		<meta charset="utf-8">
		<title>My first three.js app</title>
		<style>
			body { margin: 0; }
		</style>
	</head>
	<body>
		<script src="js/three.js"></script>
		<script src="js/OrbitControls.js"></script>
	
		<script>
			//创建一个场景，相当于一个房间，
			const scene = new THREE.Scene();
									//PerspectiveCamera 透视摄像机，OrthograhicCamera正交摄像机
			const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
			//渲染器
			const renderer = new THREE.WebGLRenderer({antialias:true});
			//设置渲染器尺寸
			renderer.setSize(window.innerWidth, window.innerHeight );
			renderer.setClearColor(0xfffae8,0.8);
			//添加到html中
			document.body.appendChild( renderer.domElement );
			//创造一个立方体
			// const geometry = new THREE.BoxGeometry();
			
			var LineMat = new THREE.MeshLambertMaterial({color:0xdddfff});
			// LineMat.color=0xdddfff;
			//宽度
			var BorderWidth=1;
			//高度
			var PositionY=0;
			var length=20;
			var width=15;
			var positionX=0;
			var positionZ=0;
			//水平线
			var horizonalLineGeometry=new THREE.PlaneGeometry(BorderWidth,length);
			var topLine = new THREE.Mesh( horizonalLineGeometry, LineMat );
			//设置定位
			topLine.position.set(positionX,PositionY,20);
			topLine.rotation.x = -Math.PI / 2.0;	
			// topLine.rotation.z = -Math.PI / 2.0;
			
			
			// 创建球体模型
			let ball = new THREE.SphereGeometry(40, 30, 30);
			var globeTextureLoader = new THREE.TextureLoader();
			const texture = globeTextureLoader.load('./img/标注.png');
			// 创建粒子材料
			let pMaterial = new THREE.PointsMaterial({
			        // 粒子颜色
			        color: 0xffffff,
			        // 粒子大小
			        size: 0.5,
					map:texture
			    });
			// 创建粒子系统
			let particleSystem = new THREE.ParticleSystem(ball, pMaterial);
			// 加入场景
			scene.add(particleSystem);
			
			//创建一个基础材料
			// const material = new THREE.MeshBasicMaterial( { color: 0xff5500 } );
			//网格
			// const cube = new THREE.Mesh( geometry, material );
			//添加到房间内
			scene.add(topLine );
			//把摄像机往外面移动
			camera.position.z =50;
			
			//相机控制
			var orbitControl=new THREE.OrbitControls(camera,renderer.domElement);
			orbitControl.enableDamping=true;
			// this.orbitControl.autoRotate=true;
			orbitControl.dampingFactor = 0.5;
			// 视角最小距离
			orbitControl.minDistance = 0;
			// 视角最远距离
			orbitControl.maxDistance = 2000;
			// 最大角度
			orbitControl.maxPolarAngle = Math.PI / 2.2;
			//坐标系辅助器
			let axes = new THREE.AxisHelper(1000);
			scene.add(axes);
			
			const animate = function () {
				//创建了一个使渲染器能够在每次屏幕刷新时对场景进行绘制的循环
				requestAnimationFrame( animate );

				// cube.rotation.x += 0.01;
				// cube.rotation.y += 0.01;

				renderer.render( scene, camera );
			};

			animate();
		</script>
	</body>
</html>